﻿@model HomeControllerModel.Index
<div class="row">
    <div class="span2">
        dd
    </div>
    <div class="span10">
        <div>
            <div class="item-detail clearfix">
                <div class="item-detail-property">
                    <div class="item-detail-property-wrap">
                        <div class="property">
                            <h4>
                                @(Model.Item.Name)</h4>
                            <h4 style="color: #e4393c">
                                全网性价比第一！买贵包退差价！</h4>
                            <div class="item-meta">
                                <p>
                                    价格：<span id="price" class="item-price">@Model.Item.Price</span></p>
                            </div>
                            <div class="item-sku">
                                <dl class="dl-horizontal">
                                    @if (Model.Item.Skus != null)
                                    {
                                        foreach (var o in Model.Item.Skus.GetSaleProps())
                                        {
                                        <dt>@(o.Key)：</dt>
                                        <dd>
                                            <ul class="list-inline inline">
                                                @foreach (var v in o.Value)
                                                {
                                                    <li class="item-sku-prop" data-value="@(v.Key)" ><a href="javascript:void(0);"><span>@v.Value</span>
                                                    </a><i></i></li>
                                                }
                                            </ul>
                                        </dd>
                                        }
                                        <dt>数 量：</dt><dd>
                                            <div class="input-prepend input-append">
                                                <span class="add-on"><a href="javascript:void(0);"><i class="icon-minus"></i></a>
                                                </span>
                                                <input id="item-quantity" class="input-mini" type="text" title="请输入购买量" maxlength="3"
                                                    value="1" />
                                                <span class="add-on"><a href="javascript:void(0);"><i class="icon-plus"></i></a>
                                                </span><span class="add-on">(库存 <span id="stock" class="item-stock">@(Model.Item.Quantity)</span>件)</span>
                                            </div>
                                        </dd>
                                    }
                                </dl>
                                <ul class="unstyled item-action">
                                    <li class="item-action-buy"><a href="javascript:void(0);"></a></li>
                                    <li class="item-action-add"><a href="javascript:void(0);"></a></li>
                                </ul>
                                <p>
                                    ss</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item-detail-gallery">
                    <div class="gallery">
                        <div class="picture">
                            <a href="http://img03.taobaocdn.com/bao/uploaded/i3/16596022757389721/T1Cp9DXvRcXXXXXXXX_!!0-item_pic.jpg"
                                class="item-gallery" rel='gallery' title="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色">
                                <img src="http://img03.taobaocdn.com/bao/uploaded/i3/16596022757389721/T1Cp9DXvRcXXXXXXXX_!!0-item_pic.jpg_460x460.jpg"
                                    alt="" />
                            </a>
                            <div class="zoom-icon">
                            </div>
                        </div>
                        <div id="item-gallery-thumb">
                            <div class="slides-container">
                                <div class="thumb clearfix">
                                    <a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img03.taobaocdn.com/bao/uploaded/i3/16596022757389721/T1Cp9DXvRcXXXXXXXX_!!0-item_pic.jpg_460x460.jpg',largeimage: 'http://img03.taobaocdn.com/bao/uploaded/i3/16596022757389721/T1Cp9DXvRcXXXXXXXX_!!0-item_pic.jpg'}">
                                        <img src="http://img03.taobaocdn.com/bao/uploaded/i3/16596022757389721/T1Cp9DXvRcXXXXXXXX_!!0-item_pic.jpg_60x60.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img02.taobaocdn.com/imgextra/i2/667066596/T2KvL7XilaXXXXXXXX_!!667066596.jpg_460x460.jpg',largeimage: 'http://img02.taobaocdn.com/imgextra/i2/667066596/T2KvL7XilaXXXXXXXX_!!667066596.jpg'}">
                                        <img onerror="this.src='http://www.360buy.com/images/none/none_50.gif'" src="http://img02.taobaocdn.com/imgextra/i2/667066596/T2KvL7XilaXXXXXXXX_!!667066596.jpg_60x60.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg',largeimage: 'http://img12.360buyimg.com/n0/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg'}">
                                        <img src="http://img12.360buyimg.com/n5/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/3538/023399f8-376d-45af-b2d3-57c464952563.jpg',largeimage: 'http://img12.360buyimg.com/n0/3538/023399f8-376d-45af-b2d3-57c464952563.jpg'}">
                                        <img onerror="this.src='http://www.360buy.com/images/none/none_50.gif'" src="http://img12.360buyimg.com/n5/3538/023399f8-376d-45af-b2d3-57c464952563.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg',largeimage: 'http://img12.360buyimg.com/n0/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg'}">
                                        <img src="http://img12.360buyimg.com/n5/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                </div>
                            </div>
                        </div>
                        <div class="action">
                            <div class="placeholder">
                                asdfasf</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top: 10px;">
            <div class="item-attr">
                <div class="item-attr-brand">
                </div>
                <ul class="item-attr-list unstyled clearfix">
                    @foreach (var o in Model.Item.GetProps())
                    {
                        <li>@o.Key ：@o.Value </li>
                    }
                </ul>
            </div>
        </div>
    </div>
</div>
@section js
{
    @Url.Ayatta().StaticJs("jquery.slides.min")
    @Url.Ayatta().StaticJs("jquery.jqzoom.pack")
    <script type='text/javascript'>
        
        var skuResult = { };
        var skus= @(Html.Raw(Model.SkusJson)) ;

        //获得对象的key
        function getObjKeys(obj) {
            if (obj !== Object(obj)) throw new TypeError('Invalid object');
            var keys = [];
            for (var key in obj)
                if (Object.prototype.hasOwnProperty.call(obj, key))
                    keys[keys.length] = key;
            return keys;
        }
        //把组合的key放入结果集SKUResult
        function add2SKUResult(key, sku) {
            if (skuResult[key]) {//SKU信息key属性·
                skuResult[key].count += sku.count;
                skuResult[key].prices.push(sku.price);
            } else {
                skuResult[key] = {
                    count: sku.count,
                    prices: [sku.price]
                };
            }
        }
        //对一条SKU信息进行拆分组合
        function combineSKU(skuKeyAttrs, cnum, sku) {
            var len = skuKeyAttrs.length;
            for (var i = 0; i < len; i++) {
                var key = skuKeyAttrs[i];
                for (var j = i + 1; j < len; j++) {
                    if (j + cnum <= len) {
                        var tempArr = skuKeyAttrs.slice(j, j + cnum);    //安装组合个数获得属性值·
                        var genKey = key + ";" + tempArr.join(";");    //得到一个组合key
                        add2SKUResult(genKey, sku);
                    }
                }
            }
        }
        //初始化得到结果集
        function initSKU() {
            var i, j, skuKeys = _.keys(skus);
            for (i = 0; i < skuKeys.length; i++) {
                var skuKey = skuKeys[i]; //一条SKU信息key
                var sku = skus[skuKey];    //一条SKU信息value
                var skuKeyAttrs = skuKey.split(";"); //SKU信息key属性值数组
                var len = skuKeyAttrs.length;

                //对每个SKU信息key属性值进行拆分组合
                for (j = 0; j < len; j++) {
                    //单个属性值作为key直接放入SKUResult
                    add2SKUResult(skuKeyAttrs[j], sku);
                    //对本组SKU信息key属性进行组合，组合个数为j
                    (j > 0 && j < len - 1) && combineSKU(skuKeyAttrs, j, sku);
                }

                //结果集接放入SKUResult
                skuResult[skuKey] = {
                    count: sku.count,
                    prices: [sku.price]
                };
            }
        }
        //初始化用户选择事件
        $(function () {
            initSKU();
            var quantity = 0;
            var array = _.values(skus);
            _.each(array, function(o) {
                quantity += o.count;
            });
            $("#stock").text(quantity);
            $('.item-sku-prop').each(function () {
                var self = $(this);
                var attr_id = self.attr('data-value');
                if (!skuResult[attr_id]) {
                    self.addClass("item-sku-prop-disabled");
                }
            }).click(function () {
                var self = $(this);
                if (self.hasClass("item-sku-prop-disabled"))
                    return false;
                self.toggleClass('item-sku-prop-selected').siblings().removeClass('item-sku-prop-selected');

                var selectedObjs = $('.item-sku-prop-selected');
                if (selectedObjs.length) {
                    //获得组合key价格
                    var selectedIds = [];
                    selectedObjs.each(function () {
                        selectedIds.push($(this).attr('data-value'));
                    });
                    selectedIds.sort(function (value1, value2) {
                        return parseInt(value2) - parseInt(value1);
                    });
                    var len = selectedIds.length;
                    var count = skuResult[selectedIds.join(';')].count;
                    var prices = skuResult[selectedIds.join(';')].prices;
                    var maxPrice = Math.max.apply(Math, prices);
                    var minPrice = Math.min.apply(Math, prices);
                    $('#price').text(maxPrice > minPrice ? minPrice + "-" + maxPrice : maxPrice);
                    $('#stock').text(count);
                    //用已选中的节点验证待测试节点 underTestObjs
                    $(".item-sku-prop").not(selectedObjs).not(self).each(function () {
                        var siblingsSelectedObj = $(this).siblings('.item-sku-prop-selected');
                        var testAttrIds = []; //从选中节点中去掉选中的兄弟节点
                        if (siblingsSelectedObj.length) {
                            var siblingsSelectedObjId = siblingsSelectedObj.attr('data-value');
                            for (var i = 0; i < len; i++) {
                                (selectedIds[i] != siblingsSelectedObjId) && testAttrIds.push(selectedIds[i]);
                            }
                        } else {
                            testAttrIds = selectedIds.concat();
                        }
                        testAttrIds = testAttrIds.concat($(this).attr('data-value'));
                        testAttrIds.sort(function (value1, value2) {
                            return parseInt(value2) - parseInt(value1);
                        });
                        if (!skuResult[testAttrIds.join(';')]||skuResult[testAttrIds.join(';')].count<1) {
                            $(this).removeClass('item-sku-prop-selected').addClass("item-sku-prop-disabled");
                        } else {
                            $(this).removeClass("item-sku-prop-disabled");
                        }
                    });
                } else {
                    //设置默认价格
                    $('#price').text('--');
                    //设置属性状态
                    $('.item-sku-prop').each(function() {
                        skuResult[$(this).attr('data-value')] ? $(this).removeClass("item-sku-prop-disabled") : $(this).removeClass('item-sku-prop-selected').addClass("item-sku-prop-disabled");
                    });
                }
            });
            
            
            $(".item-action-add a").click(function () {
                var i = @(Model.Item.Skus.GetSaleProps().Count) ;
                var stock= @(Model.Item.Quantity) ;
                var itemId=@(Model.Item.Id) ;
                var skuId = 0;
                if (Ayatta.Identity.IsAuthenticated == false) {
                  Ayatta.Passport.Fun.login();
                  return false;
                 }
                if(i>0) {
                    var selectedProp = $(".item-sku-prop-selected");
                    if (selectedProp.length != i) {
                        $(".item-sku").addClass("item-sku-attention");
                        return false;
                    } else {
                        $(".item-sku").removeClass("item-sku-attention");
                    }

                    var values = [];
                    _.each(selectedProp, function(o) {
                        var value = $(o).attr('data-value');
                        values.push(value);
                    });
                    var sku = skus[values.join(';')];
                    if (sku == null) {
                        alert("sku错误");
                        return false;
                    }
                    stock = sku.count;
                    skuId = sku.id;
                }
                var quantity = parseInt($("#item-quantity").val()) || 1;
                
                if (quantity > stock) {
                    alert('数量不对');
                    return false;
                }
                 
                var url = $.format('{0}/add/{1}?skuId={2}&qty={3}&callback=?', 'http://cart.ayatta.com/cart', itemId,skuId, quantity);
                $.getJSON(url, function (result) {
                    console.log(result);
                    if (result.Status == true) {
                        alert('0');
                        //Sk.Cart.RenderMiniCart();
                    }
                });
                return false;
            });
        });    

    </script>
    <script type="text/javascript">
        $(function () {
            $('.item-gallery').jqzoom({ title: false, zoomWidth: 460, zoomHeight: 460 });
            $('#item-gallery-thumb').slides({
                generateNextPrev: true, generatePagination: false
            });
        }); </script>
}
@section css
{
    @Url.Ayatta().StaticCss("jquery.jqzoom")
    <style type="text/css">
        .item-detail { border: 1px solid rgba(204,204,204,.4); position: relative; }
        .item-detail-gallery { margin-left: -100%; border-right: 1px solid rgba(204,204,204,.2); float: left; width: 460px; }
        .item-detail-property { float: left; width: 100%; }
        .item-detail-property-wrap { margin: 0 0 0 460px; border-left: 1px solid rgba(204,204,204,.2); padding: 0 20px 10px; }
        .item-attr { border: 1px solid #e6e6e6; background-color: #f6f6f6; }
        .item-attr-brand { padding: 10px; border-bottom: 1px solid #e6e6e6; background-color: #f6f6f6; }
        .item-attr-list { margin: 0px; padding: 0 20px 18px 20px; border-top: 1px solid #fff; }
        .item-attr-list li { display: inline; float: left; width: 217px; height: 18px; overflow: hidden; margin: 10px 15px 0 0; line-height: 18px; vertical-align: top; white-space: nowrap; text-overflow: ellipsis; color: #666; }
        .zoomWrapperImage img { max-width: none; }
    </style>
}
